<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%--ctxPath--%>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
<%--项目路径 --%>
<c:set var="path" value="${ctxPath}" />
<%--静态文件目录 --%>
<c:set var="staticPath" value="${ctxPath}" />
<!DOCTYPE html>
<html>
<head>
    <title>灯塔</title>
    <meta name="keywords" content="灯塔博客">
    <meta name="description" content="灯塔博客">
<%--    <link href="${staticPath }/assets/css/style.css" rel="stylesheet" type="text/css">--%>
<style>
    html, body, ul, li {
        margin: 0;
        padding: 0;
        border: none;
    }

    body {
        /*background: #f2f2f2;*/
        font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
        font-size: 14px;
        color: #FFF;
    }

    body * {
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
        cursor: pointer;
        color: #3a76bf;
    }

    .clearfix {
        display: block;
    }
    /*头部也就是页面最上面的CSS*/
    .header {
        width: 100%;
        height: 75px;
        background: #f8f8fa;
        box-shadow: 0 1px 3px #ddd;
        border: 1px #fff solid;
        -webkit-box-shadow: 0 1px 3px #ddd;
        border-left: none;
        border-right: none;
        position: relative;
        z-index: 999;
    }

    .header_box {
        width: 1100px;
        margin: 0 auto;
        height: 100%;
        line-height: 75px;
    }
    .header_logo {
        width: 20%;
        float: left;
        height: 100%;
        text-align: center;
        vertical-align: middle;
    }


    .header_nav {
        width: 80%;
        float: left;
        height: 100%;
        line-height: 75px;
        vertical-align: middle;
    }
    /*ul {*/
    /*    display: flex;*/
    /*    list-style-type: none; !* 移除默认的列表样式 *!*/
    /*    padding: 0; !* 移除默认的内边距 *!*/
    /*}*/

    /*li {*/
    /*    margin-right: 10px; !* 可选：为列表项之间添加间距 *!*/
    /*}*/
    .header_nav > ul {
        display: flex;
        padding-left: 20px;
        float: left;
        list-style-type: none; /* 移除默认的列表样式 */
    }

    .header_nav > ul li {
        display: inline-block; /* 使列表项水平排列 */
        list-style: none;
        text-align: center;
        line-height: 30px;
        padding: 10px;
        height: 30px;
        margin: 0 10px;
        float: left;
    }
    /*全部部分*/
    .article_box {
        width: 1100px;
        /*width: 80%;*/
        margin: 20px auto;
    }


    /*首页文章部分*/
    .article_box_one {
        width: 100%;
        margin-bottom: 24px;
    }

    .index_article_title {
        padding: 10px 20px 30px 20px;
        background: #f8f8fa;
        box-shadow: 0 1px 3px #ddd;
        border: 1px #fff solid;
        -webkit-box-shadow: 0 1px 3px #ddd;
        font-size: 16px;
    }

    .index_article_title h3 {
        font-weight: normal;
        display: block;
        width: 100%;
        float: left;
        color: #333;
    }

    .index_article_title a {
        display: block;
        width: 10%;
        float: right;
        font-size: 14px;
        text-align: right;
        color: #999;
        padding-top: 6px;
    }

    .index_article_title a:hover {
        color: #3a76bf;
    }


    .index_article {
        width: 100%;
        background: #f8f8fa;
        box-shadow: 0 1px 3px #ddd;
        border: 1px #fff solid;
        -webkit-box-shadow: 0 1px 3px #ddd;
        border-top: none;
    }

    .index_article .article_list {
        width: 100%;
        display: block;
        border-bottom: 1px #efefef solid;
        /*padding: 20px 20px 20px 20px;*/
    }

    .index_article .article_list:last-child {
        border-bottom: none;
    }

    .index_article .article_list:nth-child(1) {
        border-top: 1px #efefef solid;
    }

    .index_article .article_list .article_list_img {
        display: inline-block;
        font-size: 0;
        float: left;
        margin-left: -240px;
        max-height: 144px;
        overflow: hidden;
    }

    .index_article .article_list .article_list_img img {
        width: 226px;
        vertical-align: middle;
    }

    .index_article .article_list h3 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #3a76bf;
        display: block;
        font-size: 16px;
        padding: 0 20px 10px 20px;
        font-weight: bold;
        line-height: 30px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .index_article .article_list p {
        margin: 0 20px 10px 20px;
        font-size: 13px;
        color: #666;
        display: inline-block;
        /*height: 70px;*/
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .index_article .article_list .article_list_link {
        padding: 0 20px;
        font-size: 16px;
    }

    /*文章点击率*/
    .article_list_count {
        color: #666;
        display: inline-block;
        text-indent: .5em;
        line-height: 18px;
    }


    /*博客文章详情*/
    .article_content_box {
        color: #666;
        font-size: 14px;
        padding: 10px;
        width: 100%;
        margin-bottom: 24px;
        background: #f8f8fa;
        box-shadow: 0 1px 3px #ddd;
        border: 1px #fff solid;
        -webkit-box-shadow: 0 1px 3px #ddd;
        border-top: none;
    }
    .article_title {
        color: #3a76bf;
        font-weight: normal;
        font-size: 22px;
        margin-top: 10px;
        text-align: center;
        vertical-align: middle;
    }

    .article_info{
        margin-top: 10px;
        text-align: center;
        vertical-align: middle;
        color: #000000;
    }



    .article_content {
        margin: 10px 100px 20px 100px;
        line-height: 30px;
        background-color: #eee;
        color: #666;
        padding: 10px 10px;
        color: #000000;
    }
    .index_news_list_DXAWc {
        position: relative;
        width: 100%;
    }

    .index_news_list_DXAWc .index_news_list_p_X8PK9 {
        /*height: 2.714286rem;*/
        /*line-height: 2.714286rem;*/
        overflow: hidden;
        width: 100%;
    }
    .index_news_list_DXAWc .index_news_list_p_X8PK9 a {
        color: #212223;
        font-family: PingFangSC-Regular,PingFang SC;
        font-size: 1.142857rem;
        font-weight: 400;
    }
</style>
</head>
<body>

<div class="header">
    <div class="header_box">
        <div class="header_logo">
            <img src="${staticPath }/assets/img/logo.png"/> </img>
        </div>
        <div class="header_nav">
            <ul>
                <li><a href="#"><h2>Java Web开发</h2></a></li>
                <li><a href="#"><h2>Java程序设计</h2></a></li>
                <li><a href="#"><h2>人工智能</h2></a></li>
                <li><a href="login.jsp"><h2>博客后台登录</h2></a></li>
            </ul>
        </div>
    </div>
</div>

<div class="article_box clearfix">
    <!--首页最新模板部分-->
    <div class="article_box_one">
        <div class="index_article_title">
            <h3>博客</h3>
        </div>
        <ul class="index_article">
            <c:forEach items="${articleList}" var="article">
                <li class="clearfix article_list">
                    <div class="index_news_list_DXAWc ">
                        <p class="index_news_list_p_X8PK9 ">
                            <a style="padding-left: 20px;" title="${article.title}"
                               href="ArticleServlet?method=detail&id=${article.id}"
                               target="_blank" rel="">${article.title}</a><span style="float:left;">${article.createdTime}</span>
                        </p>
                    </div>
                </li>
            </c:forEach>

        </ul>
    </div>
</div>
</body>
</html>